<template>
    <!-- 中间内容列表 -->
    <van-list class="vanList" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> 
    
        <van-card :title="p.title" v-for="(p,i) in list" :key="i" :thumb="`/cook_img/${p.pic}`" @click="detail(p.bid)">
          <template #tags class="author">
            <div>
              <van-tag plain type="danger">9.0分</van-tag>
              <van-tag plain type="danger">79人做过</van-tag>
            </div>
            <div class="tags">{{p.describe}}</div>
            <div class="author_div">
              <van-image class="author_img" round :src="`/author_img/${p.upic}`" width="20px" height="20px"></van-image>
              <span>{{p.uname}}</span>
            </div>
          </template>
        </van-card>
    </van-list>
</template>
<script>
export default {
    data() {
        return {
            page:0,
            list: [],
            loading: false,
            finished: false,
            scroll:0,
        };
    },
    methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
        this.page++;
        setTimeout(() => {
        this.axios.get(`/index?page=${this.page}`).then(res=>{
          // console.log(res.data);
          if(res.data.data==undefined){
            this.finished = true;
            return ;
        }
        this.list.push(...res.data.data);
        // console.log("new:"+res.data.data.length);
        // console.log(this.list);
        // 加载状态结束
        this.loading = false;
        this.isload=0;
        // console.log(this.page);
      })
      }, 0);
    },
    detail(bid){
      this.$router.push(`/cookBook?bid=${bid}`)
    },
    // getscroll(){
    //   this.scroll = document.documentElement.scrollTop;
    //   console.log(this.scroll);
    // }
  },
}
</script>
<style scoped>
.van-tag--danger.van-tag--plain {
  color: #ff8833;
}
.van-card__thumb img {
  width: 100px;
  height: 100px;
}
.van-card__title {
  margin-top: 3px;
  font-weight: 700;
  font-size: 15px;
  overflow : hidden;
  text-overflow : ellipsis;
  display : -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.tags {
  display: inline-flex;
  border-radius: 5px;
  margin-bottom: 20px;
  margin-top: 5px;
  line-height: 20px;
  overflow : hidden;
  text-overflow : ellipsis;
  display : -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.van-tag--plain {
  margin-right: 5px;
  margin-top: 10px;
}
.author_img {
  vertical-align: middle;
  margin-right: 5px;
}
.van-card__thumb {
  width: 120px;
  height: 120px;
  border-radius: 5px;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 15px;
}
.van-card__content {
  position: relative;
}
.author_div {
  position: absolute;
  bottom: 3px;
}
</style>